<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./images/icon/demo.css">
    <link rel="stylesheet" href="./images/icon/iconfont.css">
    <title>shop</title>
</head>

<body>
    <div class="cont">
        <!-- 搜索框 -->
        <div class="sousuoBox">
            <img src="./images/logo_03.png" alt="">
            <input type="search" placeholder="Enter your keyword">
            <img src="./images/caidan_03.png" alt="">
        </div>
        <!-- 轮播图 -->
        <div class="swiperBox">
            <input type="radio" name="chk" id="chk1" checked>
            <input type="radio" name="chk" id="chk2">
            <input type="radio" name="chk" id="chk3">
            <div class="imgBox imga">
                <img src="./images/image3.jpg" alt="">
            </div>
            <div class="imgBox imgb">
                <img src="./images/image4.jpg" alt="">
            </div>
            <div class="imgBox imgc">
                <img src="./images/image5.jpg" alt="">
            </div>
            <!-- 控制器 -->
            <div class="controller">
                <ul>
                    <label for="chk1">
                        <li>
                            <div class="xianshi"></div>
                        </li>
                    </label>
                    <label for="chk2">
                        <li>
                            <div class="xianshi"></div>
                        </li>
                    </label>
                    <label for="chk3">
                        <li>
                            <div class="xianshi"></div>
                        </li>
                    </label>
                </ul>
            </div>
        </div>
        <!-- Product Category -->
        <div class="ProductBox">
            <h2>Product Category</h2>
            <div class="iconBox">
                <ul>
                    <li>
                        <img src="./images/womens_03.png" alt="">
                        <p>Women's</p>
                    </li>
                    <li>
                        <img src="./images/juice_03.png" alt="">
                        <p>Juice</p>
                    </li>
                    <li>
                        <img src="./images/foods_03.png" alt="">
                        <p>Foods</p>
                    </li>
                    <li>
                        <img src="./images/sports_03.png" alt="">
                        <p>Sports</p>
                    </li>
                    <li>
                        <img src="./images/mens_03.png" alt="">
                        <p>Men's</p>
                    </li>
                    <li>
                        <img src="./images/travel_03.png" alt="">
                        <p>Travel</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Flash Sale -->
        <div class="FlashBox">
            <div class="title">
                <h2>Flash Sale</h2>
                <button>View All</button>
            </div>
            <!-- 横向滑动 -->
            <div class="PhotoBox">
                <ul>
                    <li>
                        <img src="./images/maozi_03.png" alt="">
                    </li>
                    <li>
                        <img src="./images/shafa_03.png" alt="">
                    </li>
                    <li>
                        <img src="./images/xiezi_03.png" alt="">
                    </li>
                    <li>
                        <img src="./images/diaodeng_03.png" alt="">
                    </li>
                    <li>
                        <img src="./images/maozi_03.png" alt="">
                    </li>
                    <li>
                        <img src="./images/shafa_03.png" alt="">
                    </li>
                </ul>
            </div>
            <!-- 1-2商品列表展示 -->
            <div class="shopListBox">
                <ul>
                    <li>
                        <div class="photoBox">
                            <div>Sale</div>
                            <div>
                                <span class="iconfont icon-aixin"></span>
                            </div>
                        </div>
                        <div class="titleTxt">
                            <div class="leftBox">
                                <p class="name">Beach Cap</p>
                                <p class="price">
                                    <span>$13</span>
                                    <span>$42</span>
                                </p>
                                <div>
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                </div>
                            </div>
                            <div class="roghtBox">
                                <img src="./images/tianjia_03.png" alt="">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="photoBox">
                            <div>new</div>
                            <div>
                                <span class="iconfont icon-aixin"></span>
                            </div>
                        </div>
                        <div class="titleTxt">
                            <div class="leftBox">
                                <p class="name">Wooden Sofa</p>
                                <p class="price">
                                    <span>$74</span>
                                    <span>$99</span>
                                </p>
                                <div>
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                </div>
                            </div>
                            <div class="roghtBox">
                                <img src="./images/tianjia_03.png" alt="">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="photoBox">
                            <div>Sale</div>
                            <div>
                                <span class="iconfont icon-aixin"></span>
                            </div>
                        </div>
                        <div class="titleTxt">
                            <div class="leftBox">
                                <p class="name">Roof Lamp</p>
                                <p class="price">
                                    <span>$99</span>
                                    <span>$113</span>
                                </p>
                                <div>
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                </div>
                            </div>
                            <div class="roghtBox">
                                <img src="./images/tianjia_03.png" alt="">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="photoBox">
                            <div>-15%</div>
                            <div>
                                <span class="iconfont icon-aixin"></span>
                            </div>
                        </div>
                        <div class="titleTxt">
                            <div class="leftBox">
                                <p class="name">Sneaker Shoes</p>
                                <p class="price">
                                    <span>$87</span>
                                    <span>$92</span>
                                </p>
                                <div>
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                </div>
                            </div>
                            <div class="roghtBox">
                                <img src="./images/tianjia_03.png" alt="">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="photoBox">
                            <div>Sale</div>
                            <div>
                                <span class="iconfont icon-aixin"></span>
                            </div>
                        </div>
                        <div class="titleTxt">
                            <div class="leftBox">
                                <p class="name">Beach Cap</p>
                                <p class="price">
                                    <span>$13</span>
                                    <span>$42</span>
                                </p>
                                <div>
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                </div>
                            </div>
                            <div class="roghtBox">
                                <img src="./images/tianjia_03.png" alt="">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="photoBox">
                            <div>Sale</div>
                            <div>
                                <span class="iconfont icon-aixin"></span>
                            </div>
                        </div>
                        <div class="titleTxt">
                            <div class="leftBox">
                                <p class="name">Wooden Sofa</p>
                                <p class="price">
                                    <span>$74</span>
                                    <span>$99</span>
                                </p>
                                <div>
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                    <img src="./images/xingji_03.png" alt="">
                                </div>
                            </div>
                            <div class="roghtBox">
                                <img src="./images/tianjia_03.png" alt="">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 1-3 图片 -->
        <div class="photoBox">
            <div class="bgcolorBox">
                <div class="text">
                    <p>Winter Sale 50% Off</p>
                    <p>Suha is a multipurpose,creative &
                        <br>
                        modern mobile template.
                    </p>
                    <button>Shop Today</button>
                </div>
            </div>
        </div>
        <!-- Weekly Best Sellers -->
        <div class="WeeklyBox">
            <div class="title">
                <h2>Weekly Best Sellers</h2>
                <button>View All</button>
            </div>
            <div class="shopList">
                <ul>
                    <li>
                        <div class="rightBox">
                            <div>Sale</div>
                            <div>
                                <span class="iconfont icon-aixin"></span>
                            </div>
                            <img src="./images/shafa_03.png" alt="">
                        </div>
                        <div class="textBox">
                            <h3>Modern Red Sofa</h3>
                            <p>
                                <img src="./images/qian_03.png" alt="">
                                <span>$64</span>
                                <span>$89</span>
                            </p>
                            <p>
                                <img src="./images/pinfen_03.png" alt="">
                                <span>4.88</span>
                                <span>(39)</span>
                            </p>
                            <button>
                                <img src="./images/gouwuche_03.png" alt="">
                                <span>Buy Now</span>
                            </button>
                        </div>
                    </li>
                    <li>
                        <div class="rightBox">
                            <div>Sale</div>
                            <div>
                                <span class="iconfont icon-aixin"></span>
                            </div>
                            <img src="./images/maozi_03.png" alt="">
                        </div>
                        <div class="textBox">
                            <h3>Office Chair</h3>
                            <p>
                                <img src="./images/qian_03.png" alt="">
                                <span>$100</span>
                                <span>$160</span>
                            </p>
                            <p>
                                <img src="./images/pinfen_03.png" alt="">
                                <span>4.82</span>
                                <span>(125)</span>
                            </p>
                            <button>
                                <img src="./images/gouwuche_03.png" alt="">
                                <span>Buy Now</span>
                            </button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 1-4 Featured -->
        <div class="endBox">
            <!-- 广告 -->
            <div class="ggBox">
                <div class="title">
                    Get 20%
                    <br>
                    discount
                </div>
                <div class="text">
                    To get discount,enter
                    <br>
                    the GET20 code on the checkout
                    <br>
                    page.
                </div>
            </div>
        </div>

        <!-- Featured Products -->
        <div class="FeaturedBox">
            <div class="title">
                <h2>Flash Sale</h2>
                <button>View All</button>
            </div>
            <div class="shopList">
                <ul>
                    <li>
                        <div class="shopPhotoBox">
                            <img src="./images/biaoqian_03.png" class="biaoqian" alt="">
                            <span class="iconfont icon-aixin"></span>
                            <img src="./images/huaban_03.png" class="tupian" alt="">
                        </div>
                        <div class="text">
                            <h3>Blue Skateboard</h3>
                            <p>
                                <span>$64</span>
                                <span>$89</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="shopPhotoBox">
                            <img src="./images/biaoqian_03.png" class="biaoqian" alt="">
                            <span class="iconfont icon-aixin"></span>
                            <img src="./images/baobao_03.png" class="tupian" alt="">
                        </div>
                        <div class="text">
                            <h3>Travel Bag</h3>
                            <p>
                                <span>$64</span>
                                <span>$89</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="shopPhotoBox">
                            <img src="./images/biaoqian_03.png" class="biaoqian" alt="">
                            <span class="iconfont icon-aixin"></span>
                            <img src="./images/shafa_03.png" class="tupian" alt="">
                        </div>
                        <div class="text">
                            <h3>Wooden Sofa</h3>
                            <p>
                                <span>$74</span>
                                <span>$99</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="shopPhotoBox">
                            <img src="./images/biaoqian_03.png" class="biaoqian" alt="">
                            <span class="iconfont icon-aixin"></span>
                            <img src="./images/diaodeng_03.png" class="tupian" alt="">
                        </div>
                        <div class="text">
                            <h3>Roof Lamp</h3>
                            <p>
                                <span>$99</span>
                                <span>$113</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 底部标签栏 -->
        <div class="footerBox">
            <ul>
                <li>
                    <img src="./images/home_03.png" alt="">
                    <p>Home</p>
                </li>
                <li>
                    <img src="./images/sup_03.png" alt="">
                    <p>Support</p>
                </li>
                <li>
                    <img src="./images/cart_03.png" alt="">
                    <p>Cart</p>
                </li>
                <li>
                    <img src="./images/pages_03.png" alt="">
                    <p>Pages</p>
                </li>
                <li>
                    <img src="./images/set_03.png" alt="">
                    <p>Settings</p>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>